<template>
  <div class="app-container">
    <div class="search-container" style="display: flex">
      <el-form-item label="搜索" style="width: 200px; margin-left: 10px">
        <el-input v-model="params.search" placeholder="请输入关键词" />
      </el-form-item>
      <el-button type="primary" style="margin-left: 10px" @click="clearParams"
        >清空</el-button
      >
      <el-button type="primary" style="margin-left: 10px" @click="handleSearch"
        >查询</el-button
      >
      <el-button
        type="success"
        style="margin-left: 10px"
        @click="handleAddSupervisor"
        >添加网格员</el-button
      >
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="gridId" label="编号" />
        <el-table-column prop="gcode" label="编码" />
        <el-table-column prop="provinceName" label="省" />
        <el-table-column prop="cityName" label="市" />
        <el-table-column prop="gaddress" label="详细地址" />
        <el-table-column prop="gname" label="用户名" />
        <el-table-column prop="gphone" label="电话" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleUpdate(scope.row)"
            >
              更新
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        layout="total, prev, pager, next, jumper"
        :total="pageRes.total"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </el-card>
    <el-dialog v-model="updateDialogFormVisible" title="更新" width="800">
      <el-form label-width="auto" style="max-width: 400px; margin-top: 20px">
        <el-form-item label="ID">
          <el-input v-model="curRow.gridId" disabled />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="curRow.gname" disabled />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="curRow.gcode" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="curRow.gphone" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="curRow.gpassword"
            placeholder="输入即更新密码，不输入不更新密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdate"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="addDialogFormVisible" title="添加监督员" width="800">
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="addForm.gname" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="addForm.gcode" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addForm.gphone" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="所在省">
          <el-select
            @change="provinceChange"
            v-model="addForm.gprovince"
            placeholder="请选择省份"
          >
            <el-option
              v-for="v in provinceList"
              :key="v.provinceId"
              :label="v.pname"
              :value="v.provinceId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在市">
          <el-select v-model="addForm.gcity" placeholder="请选择市">
            <el-option
              v-for="v in cityList"
              :key="v.cityId"
              :label="v.cityName"
              :value="v.cityId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addForm.gaddress" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="addForm.gpassword"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import GridAPI from "@/api/grid";
import DistrictAPI from "@/api/district";
import RoleAPI from "@/api/role";
import { ElMessage, ElMessageBox } from "element-plus";
import { fa } from "element-plus/es/locale";

const params: any = ref({
  searchField: "g_name",
  search: "",
  pageSize: 5,
  curPage: 1,
});

const updateDialogFormVisible = ref(false);
const addDialogFormVisible = ref(false);

const curRow: any = ref({});

const updateParams: any = ref({
  id: "",
  email: "",
  nickName: "",
  note: "",
});

const pageRes = ref({
  totalPage: 0,
  total: 0,
});

const provinceList: any = ref([]);

const cityList: any = ref([]);

const tableData: any = ref([]);

const roleList: any = ref([]);

const addForm: any = reactive({
  gname: "",
  gcode: "",
  gphone: "",
  gpassword: "",
  gprovince: "",
  gcity: "",
  gaddress: "",
});

function reqSupervisorList() {
  GridAPI.getGridList(params.value).then((res) => {
    console.log(res);
    tableData.value = [];
    pageRes.value.totalPage = res.pages;
    pageRes.value.total = res.total;
    for (const v of res.records) {
      v.gpassword = "";
      tableData.value.push(v);
    }
  });
}

function pageChange(v: any) {
  console.log(v);
  console.log();
  params.value.curPage = v;
  reqSupervisorList();
}

function pad(num: any) {
  return num.toString().padStart(2, "0");
}

function formatDateTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function verify(row: any) {
  curRow.value = Object.assign({}, row);
  console.log(curRow.value);
  updateDialogFormVisible.value = true;
}

function handleUpdate(row: any) {
  curRow.value = Object.assign({}, row);
  console.log(curRow.value);
  updateDialogFormVisible.value = true;
}

function handleDelete(row: any) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "确认",
  }).then(() => {
    GridAPI.deleteGrid(row.gridId).then((res) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      reqSupervisorList();
    });
  });
}

onMounted(() => {
  reqSupervisorList();
  reqProvinceList();
});

function clearParams() {
  params.value = {
    searchField: "s_name",
    search: "",
    pageSize: 5,
    curPage: 1,
  };
}

function handleSearch() {
  reqSupervisorList();
}

function confirmUpdate() {
  GridAPI.updateGrid(curRow.value).then((res) => {
    ElMessage({
      showClose: true,
      message: "更新成功",
      type: "success",
    });
    updateDialogFormVisible.value = false;
    reqSupervisorList();
  });
}

function reqProvinceList() {
  DistrictAPI.provinceList().then((res) => {
    provinceList.value = [];
    for (const v of res) {
      provinceList.value.push(v);
    }
  });
}

function reqCityList(provinceId: any) {
  DistrictAPI.cityList(provinceId).then((res) => {
    cityList.value = [];
    for (const v of res) {
      cityList.value.push(v);
    }
  });
}

function provinceChange(v: any) {
  console.log(v);
  cityList.value = [];
  addForm.gcity = "";
  reqCityList(v);
}

function reqRoleList() {
  roleList.value = [];
  RoleAPI.getRoleList(null).then((res) => {
    console.log(res);
    for (const v of res.list) {
      roleList.value.push(v);
    }
  });
}

function handleAddSupervisor() {
  addDialogFormVisible.value = true;
  addForm.gname = "";
  addForm.gcode = "";
  addForm.gphone = "";
  addForm.gpassword = "";
  addForm.gprovince = "";
  addForm.gcity = "";
  addForm.gaddress = "";
  reqProvinceList();
}

function confirmAdd() {
  console.log(addForm);
  GridAPI.addGrid(addForm).then((res) => {
    console.log(res);
    ElMessage({
      showClose: true,
      message: "添加成功",
      type: "success",
    });
    addDialogFormVisible.value = false;
    reqSupervisorList();
    addForm.gname = "";
    addForm.gcode = "";
    addForm.gphone = "";
    addForm.gpassword = "";
    addForm.gprovince = "";
    addForm.gcity = "";
    addForm.gaddress = "";
  });
}
</script>
